/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="page">
		<form @submit="login" class="form">
			<view class="formContent">
				<view class="formItem">
					<input type="text" class="input" name="phone" :placeholder="$t('请输入手机号')" v-model="phone">
				</view>
				<view class="formItem">
					<input type="text" class="input" name="code" :placeholder="$t('请输入验证码')" v-model="code" maxlength="6">
					<view class="sendCode btn-color" v-if="showTime">{{time}}s{{$t('后重新获取')}}</view>
					<view class="sendCode btn-color" @click="getCode()" hover-class="text-hover" v-else>{{$t('获取验证码')}}</view>
				</view>
				<view class="formItem">
					<input type="password" class="input" name="pwd" :placeholder="$t('请输入新密码')" v-model="pwd">
				</view>
				<view class="formButton">
					<button formType="submit" class="button loginbtn" hover-class="text-hover">{{$t('重置密码')}}</button>
				</view>
			</view>
		</form>
	</view>

</template>
<script>
	import graceChecker from "../../api/graceChecker.js"
	export default {
		data() {
			return {
				timer: null, //定时器
				isClick: true, //避免用户重复点击
				time: 60, //60s后重置
				showTime: false, //时间与获取验证码切换
				phone: '',
				code: '',
				pwd: '',
			}
		},
		onLoad() {

		},
		methods: {
			// 修改
			login(e) {
				var rule = [{
						name: "phone",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: this.$t('请输入手机号')
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: this.$t('请输入验证码')
					},
					{
						name: "pwd",
						checkType: "string",
						checkRule: "6,20",
						errorMsg: this.$t('请输入密码')
					},
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					this.$http.findBackPwd({
						phone: this.phone,
						phonecode: this.code,
						password: this.pwd,
					}).then(res => {
						console.log(this.code);
						if (res.status == 200) {
							this.$toast(res.mess)
							setTimeout(() => {
								this.getback()
							}, 1500)
						}
						console.log(this.code, this.phone, this.pwd);
					})
				} else {
					this.$toast(graceChecker.error)
				}
			},
			// 获取验证码
			getCode() {
				if (this.isClick) {
					if (this.phone.length != 11) {
						return this.$toast(this.$t('手机格式不正确'))
					}
					this.$loading()
					this.$http.getSmsCode({
						phone: this.phone,
						type: 3
					}).then((res) => {
						
						this.$toast(res.mess)
						if(res.status == 200){
							this.showTime = true;
							this.timer = setInterval(() => {
								this.isClick = false;
								this.time = this.time - 1;
								if (this.time <= 0) {
									this.isClick = true;
									this.time = 60;
									this.showTime = false;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
					})
				}
			},
		},
		// 页面卸载
		onUnload() {
			this.isClick = true;
			this.time = 60;
			// 清空定时器
			clearInterval(this.timer);
			this.timer = null;
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		padding-bottom: 20upx;
		background-color: #ffffff;
		height: 100%;

		.form {
			width: 100%;

			.formContent {
				padding-top: 100upx;
				padding-left: 40upx;
				padding-right: 24upx;

				.formItem {
					height: 104upx;
					display: flex;
					border-bottom: 1upx solid rgba(238, 238, 238, 1);
					align-items: center;

					input {
						flex: 1;
						height: 100%;
						font-size: 30upx;
						font-weight: 400;

						&::-webkit-input-placeholder {
							color: rgba(204, 204, 204, 1);
						}
					}

					.sendCode {
						background: transparent;
						color: #FFC300;
					}
				}

				.formButton {
					margin-top: 60upx;
					height: 100upx;
					position: relative;

					button {
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 80rpx;
					}
				}
			}
		}
		.loginbtn{
			background: #FFC300;
			border:none;
			color:#ffffff
		}
	}
</style>
